import Typography from '@mui/material/Typography';
import Avatar from "@mui/material/Avatar";

import SwitchChain from './buttons/switch-chain';
import { useGetThemeStateStore } from '../stores/theme';
import { MenuItem, Select, SelectChangeEvent } from '@mui/material';
import React, { useContext, useEffect, useState } from 'react';
import TokenManager from '../api/token/token-manager';
import { styled } from '@mui/material/styles';
import { GFSSecondaryButton } from './shared/button/gfs-button';
import { Box } from '@mui/system';
import { formatWalletAddress } from '../libs/utilities';
import { UserContext } from './HOCs/control-navigation';
import { useGetCommonStateStore } from '../stores/common';
import { useGetStartedStateStore } from '../stores/get-started-store';
import shallow from 'zustand/shallow';
import { useRouter } from 'next/router';
import Routes from '../constants/routes';
import PageBackButton from '../components/page-back-button';
import { MenuPro } from '../components/global';


const selectOutlinedStyle = {
    background: 'white',
    border: '0 !important',
    boxShadow:'none',
};

const StyledSelect = styled(Select)(() => ({
    fontFamily: 'Rubik',
    fontWeight: '400',
    fontSize: '12px',
    // lineHeight: '14px',

    color: '#13112A',
    borderRadius: '8px',
    minWidth: 60,
    height: 36,
    '& .Mui-disabled': {
        color: 'red',
        WebkitTextFillColor: 'red'
    },
    ...selectOutlinedStyle
}));


const HeardToolBar = ({ navOpen })=>{

    // const [currency, setCurrency] = useState<string>('USD');
    // const [currencies, setCurrencies] = useState([]);
    const {currenciesList,currency,setCurrenciesList,setCurrency} = useGetCommonStateStore();
    const [loading, setLoading] = useState(false);
    const [openSelect, setOpenSelect] = useState<boolean>(false);
    const { walletAddress } = useContext(UserContext);
    const {setMode,mode,bgColor0,isLight,bgColor,bgColor1,color1,txtColor,txtColor3} = useGetThemeStateStore();
    const { organizationName } = useGetStartedStateStore(
        (state) => ({
            organizationName: state.organizationName
        }),
        shallow
    );

    const router = useRouter();
    const isHome = router.route==Routes.HOME;

    // console.log("router--",router);




    const getRouterTitle = ()=>{


        return "";
     };

    useEffect(()=>{
        setMode("dart");
    },[])

    useEffect(() => {
        setLoading(true);
        TokenManager.getCurrencies()
            .then((list:[]) => {
                setCurrenciesList(list);
                if (currenciesList?.length) {
                    // @ts-ignore
                    setCurrency(currenciesList[0]);
                }
            })
            .finally(() => setLoading(false));
    }, []);



    const onSelectCurrency = async (event: SelectChangeEvent) => {
        const curr = event.target?.value;
        setCurrency(curr);
    };
    const handleClose = () => {
        setOpenSelect(false);
    };

    const handleOpen = () => {
        setOpenSelect(true);
    };


    const changeMode = ()=>{
        if(isLight){
            setMode("dart");
        }else{
            setMode("light");
        }

        console.log("changeMode->",mode,isLight);

    }


    return (
        <div className={"heard-tool-bar"} style={{background: bgColor0}}>
            <span style={{display:'inline-flex'}}>
                {/*{isHome &&*/}
                <Avatar alt="Remy Sharp" src="/logo-glow.svg" sx={{ width: 122, display: 'inline-flex',borderRadius:'0 !important',
                    '& img':{
                        objectFit: 'initial !important',
                    }
                }}/>
                {/*{getRouterTitle()==''&&*/}
                {/*    <PageBackButton  label={'Back'}   route={null}/>*/}
                {/*}*/}

                {/*{getRouterTitle()!==''&&*/}
                {/*    <span style={{*/}
                {/*        fontFamily: 'Blinker',*/}
                {/*        fontWeight: isHome?'300':'600',*/}
                {/*        fontSize: '25px',*/}
                {/*        lineHeight: '30px',*/}
                {/*        color: txtColor,*/}
                {/*        marginLeft:isHome?"16px":0,*/}
                {/*    }}>OmniX Admin</span>*/}
                {/*}*/}

                <span className={'m-t4'} style={{
                    color: txtColor,
                    marginLeft:"16px",
                }}>OmniX Admin</span>
            </span>

            <div style={{display:'inline-flex',alignItems:'center'}}>
                <Box className="d-flex" gap={'16px'}  sx={{marginLeft:'16px',alignItems:'center'}}>

                    <GFSSecondaryButton
                        variant="outlined"
                        sx={{
                            width:152,
                            pt: 1.5, pb: 1.5, height: '36px',background:bgColor +'!important' ,
                            border: '1px solid transparent !important',
                            borderRadius:'8px !important',
                            '&:hover':{
                                border: '1px solid transparent !important',
                                backgroundClip: 'padding-box, border-box !important',
                                backgroundOrigin: 'padding-box, border-box !important',
                                backgroundImage: 'linear-gradient(to right, '+bgColor+', '+bgColor+'), linear-gradient(to right, #0CAFE3, #3358B8) !important',
                            },
                        }}
                    >
                        <Box
                            component="img"
                            sx={{
                                height: 24,
                                width: 24
                            }}
                            alt="Icon"
                            src={'/metamask.png'}
                        />
                        <Box component={'span'} sx={{
                            pl: 1,
                            fontFamily: 'Rubik',
                            fontWeight: '400',
                            fontSize: '12px',
                            lineHeight: '14px',
                            alignItems: 'center',
                            color: txtColor, }} >
                            {formatWalletAddress(walletAddress, 6)}
                        </Box>
                    </GFSSecondaryButton>
                    <SwitchChain/>
                </Box >

                {/*<Button variant="contained" color='primary'  sx={{marginLeft:'16px',textTransform:'none'}}*/}
                        {/*onClick={changeMode}*/}
                {/*>switch mode</Button>*/}

                {isLight &&
                    <GFSSecondaryButton
                        variant="outlined"
                        sx={{
                            marginLeft:'16px',
                            padding:'0 !important',
                            height: '36px',
                            background:bgColor+'!important',
                            minWidth: '36px',
                            border: '2px solid transparent !important',
                            '&:hover':{
                                border:'2px solid '+bgColor+' !important',
                                backgroundImage:'none',
                                background:bgColor1+'!important',
                                '& .bb-icon':{
                                    backgroundImage:'url(/icon_theme_light2.svg) !important',
                                },
                            },}}
                        onClick={changeMode}
                    >
                        <span
                            className={'bb-icon'}
                            style={{
                                display:'flex',
                                height: 36,
                                width: 36,
                                backgroundImage:'url(/icon_theme_light1.svg)',
                            }}
                        >

                        </span>

                    </GFSSecondaryButton>
                }
                {!isLight &&
                    <GFSSecondaryButton
                        variant="outlined"
                        sx={{
                            marginLeft:'16px', padding:'0 !important', height: '36px',background:bgColor+'!important',minWidth: '36px',
                            border: '2px solid transparent !important',
                            '&:hover':{
                                border:'2px solid '+bgColor+' !important',
                                backgroundImage:'none',
                                background:bgColor1+'!important',
                                '& .bb-icon':{
                                    backgroundImage:'url(/icon_theme_dart2.svg) !important',
                                },
                                // backgroundImage: 'linear-gradient(to right, '+bgColor1+', '+bgColor1+'), linear-gradient(to right, #0CAFE3, #3358B8) !important',
                            },}}
                        onClick={changeMode}
                    >

                        <span
                            className={'bb-icon'}
                            style={{
                                display:'flex',
                                height: 36,
                                width: 36,
                                backgroundImage:'url(/icon_theme_dart1.svg)',
                            }}
                        >

                        </span>
                        {/*<Box*/}
                            {/*component="img"*/}
                            {/*sx={{*/}


                            {/*}}*/}
                            {/*alt="Icon"*/}
                            {/*src={!isLight?'/icon_theme_light.svg':'/icon_theme_dart.svg'}*/}
                        {/*/>*/}

                    </GFSSecondaryButton>
                }


            </div>




        </div>
    );

}

export default HeardToolBar;
